<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>HTML5 Element Test Page</title>
    <link rel="stylesheet" href="" />
  </head>

  <body>
    <main>
      <nav>
        <a href="#!" id="none">No CSS</a> | <a href="#!" id="primitive">Primitive</a> |
        <a href="#!" id="bootstrap">Bootstrap</a> | <a href="#!" id="foundation">Foundation</a> |
        <a href="#!" id="skeleton">Skeleton</a> |
        <a href="#!" id="material">Material</a>
      </nav>

      <div class="small-container">
        <h1>HTML5 Element Test Page</h1>
        <p>Common HTML5 elements for CSS testing purposes.</p>

        <h1>Formatting</h1>

        <p>
          This sentence is <b>bold</b>. If you like semantics, you might go with
          <strong>strong</strong> or <em>emphasized</em> text. If not, <i>italic</i> is still
          around. <small>Small</small> text is for fine print. Your copy can also be
          <sub>subscripted</sub> and <sup>superscripted</sup>, <ins>inserted</ins>,
          <del>deleted</del>, or <mark>highlighted</mark>. You would use a
          <a href="#!">hyperlink</a> to go to a new page.
        </p>
        <p>
          If you like to write about there are plenty of semantic tags for you. There's the generic
          <code>code</code>, as well as <kbd>keyboard input</kbd>, <samp>computer output</samp>, and
          <var>variables</var>.
        </p>
        <p>
          You might have need of a <cite>citation</cite>, <q>short quotation</q>,
          <abbr>abbreviation</abbr>, or <dfn>definition</dfn>. It might be <time>10:00pm</time>.
        </p>
        <address>
          <p>
            123 Fake Street<br />
            Springfield, USA
          </p>
        </address>

        <h2>Blockquote</h2>

        <blockquote>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestiae et assumenda
          molestias alias ut saepe doloribus, porro, deleniti neque, harum minus, commodi laudantium
          quod excepturi nam corrupti odit provident.
          <cite>- Blockquote Citation</cite>
        </blockquote>

        <h2>Preformatted Text</h2>
        <pre>
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}</pre
        >
        <h2>Horizontal Line</h2>

        <hr />

        <h1>Headings</h1>

        <h1>First Heading h1</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus cupiditate minima,
          magni possimus commodi, eveniet? Rem, adipisci architecto pariatur libero aliquid culpa
          sunt accusantium. Ipsa error aliquid et! Animi.
        </p>
        <h2>Second Heading h2</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia molestias ullam quasi
          est a nemo, accusamus voluptatum autem. Eius explicabo est assumenda voluptatem id, hic
          maxime mollitia facere debitis quos.
        </p>
        <h3>Third Heading h3</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo deleniti, repudiandae rerum
          nam laborum eligendi aperiam. Autem id, ad necessitatibus accusantium, facilis, quae ullam
          est, voluptates debitis fugiat quos inventore!
        </p>
        <h4>Fourth Heading h4</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cum eum eligendi
          voluptatum quasi nisi doloremque ipsam unde, laboriosam nihil voluptatem consequatur quam
          non similique vero ratione animi sit veritatis.
        </p>
        <h5>Fifth Heading h5</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptatem necessitatibus
          eos iusto nam deserunt, dicta possimus error qui reiciendis, aut dolore magnam eligendi
          maiores expedita commodi perferendis non blanditiis.
        </p>

        <h1>Lists</h1>

        <h2>Unordered list</h2>

        <ul>
          <li>
            List item one
            <ul>
              <li>Nested list item</li>
            </ul>
          </li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>

        <h2>Ordered list</h2>

        <ol>
          <li>
            List item one
            <ol>
              <li>Nested list item</li>
            </ol>
          </li>
          <li>List item two</li>
          <li>List item three</li>
        </ol>
        <h2>Definition List</h2>
        <dl>
          <dt>Definition Title One</dt>
          <dd>First definition description</dd>
          <dt>Definition Title Two</dt>
          <dd>Second definition description</dd>
        </dl>

        <h1>Tables</h1>

        <table>
          <thead>
            <tr>
              <th>Head 1</th>
              <th>Head 2</th>
              <th>Head 3</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>Footer 1</th>
              <th>Footer 2</th>
              <th>Footer 3</th>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td>Description 1</td>
              <td>Description 2</td>
              <td>Description 3</td>
            </tr>
            <tr>
              <td>Description 1</td>
              <td>Description 2</td>
              <td>Description 3</td>
            </tr>
            <tr>
              <td>Description 1</td>
              <td>Description 2</td>
              <td>Description 3</td>
            </tr>
          </tbody>
        </table>

        <h1>Forms</h1>

        <form>
          <label for="text">Text Input</label>
          <input id="text" type="text" placeholder="Text Input" />
          <label for="password">Password</label>
          <input id="password" type="password" placeholder="Password" />
          <label for="url">URL</label>
          <input id="url" type="url" placeholder="http://www.example.com" />
          <label for="email">Email Address</label>
          <input id="email" type="email" placeholder="email@example.com" />
          <label for="phone">Phone Number</label>
          <input id="phone" type="tel" placeholder="123-123-1234" />
          <label for="search">Search</label>
          <input id="search" type="search" placeholder="Search" />
          <label for="number">Number</label>
          <input id="number" type="number" placeholder="Number" />
          <label for="select">Select</label>
          <select id="select">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
          <label for="checkbox1">
            <input id="checkbox1" name="checkbox" type="checkbox" checked="checked" /> Choice
            A</label
          >
          <label for="checkbox2">
            <input id="checkbox2" name="checkbox" type="checkbox" /> Choice B</label
          >
          <label for="radio1">
            <input id="radio1" name="radio" type="radio" class="radio" checked="checked" /> Option
            1</label
          >
          <label for="radio2">
            <input id="radio2" name="radio" type="radio" class="radio" /> Option 2</label
          >
          <label for="textarea">Textarea</label>
          <textarea id="textarea" rows="5" cols="30" placeholder="Message"></textarea>
          <input type="button" value="Button" />
          <input type="submit" value="Submit" />
          <input type="reset" value="Reset" />
          <button>Button element</button>
        </form>

        <h2>Fieldset and Legend</h2>

        <form>
          <fieldset>
            <legend>Legend</legend>
            <label for="text">Text Input</label>
            <input id="text" type="text" placeholder="Text Input" />
            <input type="submit" value="Submit" />
          </fieldset>
        </form>

        <footer>
          <p>
            Made to test
            <a href="https://taniarascia.github.io/primitive/" target="_blank">Primitive</a> by
            <a href="https://www.taniarascia.com">Tania Rascia</a>.
          </p>
        </footer>
      </div>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#none').click(function () {
          $('link').attr('href', '')
        })
        $('#primitive').click(function () {
          $('link').attr('href', 'https://taniarascia.github.io/primitive/css/main.css')
        })
        $('#bootstrap').click(function () {
          $('link').attr(
            'href',
            'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'
          )
        })
        $('#foundation').click(function () {
          $('link').attr(
            'href',
            'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css'
          )
        })
        $('#skeleton').click(function () {
          $('link').attr(
            'href',
            'https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css'
          )
        })
        $('#material').click(function () {
          $('link').attr('href', 'https://code.getmdl.io/1.2.1/material.indigo-pink.min.css')
        })
      })
    </script>
  </body>
</html>
